
<template>
  <div class="h_curve ">
    <!-- <h3 class="title">
      <span class="back" @click="back"></span>监测曲线
    </h3> -->
    <div class="monitor_curve_wrap">
      
      <div class="curve_right" ref="curveRight">
        <div class="curve_time">
          <input type="text" v-model="startTimeValue" placeholder="请选择开始时间" @click="showPopFn()" />
          <span>至</span>
          <input type="text" v-model="endTimeValue" @click="endShowPopFn()" placeholder="请选择结束时间" />
        </div>
        <ul class="time_btn">
        <li :class="[timeType == '1' ?'on':'']" @click="timeSelects(0)">24小时</li>
        <li :class="[timeType == '7' ?'on':'']" @click="timeSelects(1)">7天</li>
        <li :class="[timeType == '30' ?'on':'']" @click="timeSelects(2)">30天</li>
      </ul>
        <van-popup v-model="show" position="bottom" :style="{ height: '40%' }">
          <van-datetime-picker
            v-model="currentDate"
            type="datetime"
            @change="changeFn()"
            @confirm="confirmFn()"
            @cancel="cancelFn()"
          />
        </van-popup>
        <van-popup v-model="endShow" position="bottom" :style="{ height: '40%' }">
          <van-datetime-picker
            v-model="endCurrentDate"
            type="datetime"
            @change="endChangeFn()"
            @confirm="endConfirmFn()"
            @cancel="cancelFn()"
          />
        </van-popup>
        <div class="max_val">
          最高值：{{maxVal}}
          <span>{{maxValTime}}</span>
        </div>
        <div class="mcurve_char" style="height:5rem">
          <monitor-curve
            :timeList="timeLists"
            :gasContentList="gasContentLists"
            :temprList="temprLists"
            :limitVal="limitVal"
            :alarmType="alarmType"
          ></monitor-curve>
          <!-- <monitor-curve 
            ref = "monitoringCurve"
            :timeList="timeLists"
            :gasContentList="gasContentLists"
            :temprList="temprLists"
            :cwidth="chartWidth"
            :limitVal="limitVal"
            :alarmType="alarmType"
          ></monitor-curve> -->
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import monitorCurve from "@/components/monitoringCurve";
import appapi from "@/common/appapi.js";
import { formatDate,formatNewDate } from "@/js/date";
export default {
  data() {
    return {
      msg: "",
      currentDate: new Date(),
      endCurrentDate: new Date(),
      changeDate: new Date(),
      endChangeDate: new Date(),
      show: false, // 用来显示弹出层
      endShow: false,
      startTimeValue: "",
      endTimeValue: "",
      timeLists:[],
      gasContentLists:[],
      temprLists:[],
      limitVal:[],
      timeType:"1",
      chartWidth: 0,
      alarmType:parseInt(this.$route.query.type,10) ,
       maxVal:"",
      maxValTime:"",
    };
  },
  components: {
    monitorCurve
  },
  mounted() {
      let _this=this;
      window["dsBridge"].register("GoBack", function() {
       _this.back();
    });
    window["dsBridge"].register("whetherHtml", function(ret) {
      return true;
    });
    this.chartWidth = this.$refs.curveRight.clientWidth;
   // this.$refs.monitoringCurve.style.width = this.chartWidth + "px";
    this.timeFormat(new Date());
    this.getalarmTrend();
  },

  methods: {

    // 返回上一页
    back() {
      this.$router.go(-1);
    },
    showPopFn() {
      this.show = true;
    },
    endShowPopFn() {
      this.endShow = true;
    },
    showPopup() {
      this.show = true;
    },
    changeFn() {
      // 值变化是触发
      this.changeDate = this.currentDate; // Tue Sep 08 2020 00:00:00 GMT+0800 (中国标准时间)
    },
    endChangeFn() {
      this.endChangeDate = this.endCurrentDate;
    },
    confirmFn() {
      // 确定按钮
      this.startTimeValue = this.timeFormat(this.currentDate);
      this.timeType = "0"
      this.show = false;
      this.getalarmTrend()
    },
    endConfirmFn() {
      this.endTimeValue = this.timeFormat(this.endCurrentDate);
      this.timeType = "0"
      this.endShow = false;
      this.getalarmTrend()
    },
    cancelFn() {
      this.show = false;
      this.endShow = false;
    },
    timeFormat(time) {
      // 时间格式化 2019-09-08
      return formatNewDate(time, 2);
    },
    getalarmTrend(){
       var modleId = this.$route.query.ModleId
       this.maxVal=this.$route.query.maxVal;
       this.maxValTime=this.$route.query.maxValTime;
       var param = {
        pipepointid: this.$route.query.pipepointid,
        pageSize: this.pageSizeVar,
        searchKey: this.searchKeyParam,
        Modelid:modleId
      };
      if(this.timeType != "0"){
        param.timeSelect = this.timeType;
      }else{
        param.startTime = this.startTimeValue
        param.endTime = this.endTimeValue
        if(this.startTimeValue == ""||this.endTimeValue == ""){
          return
        }
      }
       this.$api.reqApi.getalarmTrend(param).then(res => {
        if (res.code === "200") {
               console.log(res)
          this.timeLists = res.data.times;
          this.gasContentLists= res.data.values;
          this.temprLists = res.data.wendu;
          this.limitVal=res.data.limitVal;
        }
      });
    },
    timeSelects(type){
      switch(type){
        case 0:
          this.timeType = "1"
          break
        case 1:
          this.timeType = "7"
          break
        case 2:
          this.timeType = "30"
          break
      }
      this.startTimeValue = ""
      this.endTimeValue = ""
      this.getalarmTrend()
    }


  },
  destroyed () {
      appapi.setscreen("Vertical")
  }
};

</script>

<style scoped lang="stylus">
.max_val {
  height: 0.5rem;
  line-height: 0.5rem;
  margin:0 0.3rem 0.3rem 0.3rem;
  background: rgba(66, 142, 227, 0.16);
  padding-left: 0.24rem;
  color: #428ee3;
  font-size: 0.22rem;

  span {
    float: right;
    padding-right: 0.22rem;
  }
}
.h_curve{
  display:flex;
  flex-direction:column;
  flex:1;
}
.monitor_curve_wrap {
  display: flex;
  flex-direction : row;
  background: #fff;
  flex:1;
    padding-top: 0.01rem;
}
.mcurve_char{
  display:flex;
  margin:0 0.2rem;
}
.title{
  padding-top:0;
  height:0.68rem;
  line-height:0.68rem;
  font-size:.26rem
}
.time_btn {
  border: #ecf0f3 1px solid;
  align-items: center;
  justify-items: center;
  background: #fff;
  display: flex;
  // flex-direction: column;
  margin: 0.3rem auto;
  border-radius: 0.1rem;
   width: 6rem;
  li {
    flex: 1;
    display: flex;
    align-items: center;
    text-align: center;
    word-wrap: break-word;
    color: #2a2c32;;
    font-size:.36rem;
    justify-content: center;
    height: 0.8rem;
    font-weight: 500;
    &.on {
      background: #ecf0f3;
    }
  }
}

.curve_right {
  flex: 1;
  display:flex;
  flex-direction:column;
  .van-popup--bottom{
    left:50px;
    right:50px;
    width:auto;
  }
}

.curve_time {
  display: flex;
  flex-direction: row;
  margin: 0.1rem auto;
  border-bottom: #DDE0E4 1px solid;
  width: 6.9rem;
  input {
    border: 0;
    color: #000;
    font-size:.28rem
    height: 0.64rem;
    line-height: 0.64rem;
    width: 50%;
    text-align: center;
  }

  span {
    padding: 0.12rem 0.14rem;
    color:#838383;
  }
}

.curve {
  position: relative;
}

.vol_leg {
  position: absolute;
  top: 0;
  left: 150px;
  &::before {
    content: '';
    position: absolute;
    width: 10px;
    height: 10px;
    background: #e51440;
    border-radius: 50%;
    left: -15px;
    top: 5px;
  }
}
</style>
